<template>
  <div class="title_box">
    <div class="top" v-show="title!=''">
      <div class="borderLeft"></div>
      <div class="borderRight"></div>
      <span> {{title}} </span>
      <div class="btn" @click="router" v-if="url!=''">
        <img src="@/assets/images/echarts/xiang.png" alt="">
      </div>
    </div>
    <div class="ech_box" :class="[isCenter==true  ?'ech_box_center':'',isBetween==true  ?'ech_box_between':'',title==''  ?'ech_box':'ech_box_height']">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      // 标题
      type: String,
      default: "",
    },
    isCenter: {
      type: Boolean,
      default: false,
    },
    isBetween: {
      type: Boolean,
      default: false,
    },
    url: {
      type: String,
      default: "",
    },
  },
  methods: {
    router() {
      this.$router.push(this.url);
    },
  },
};
</script>

<style lang="scss" scoped>
.title_box {
  //   width: 33%;

  height: 100%;
  border: 1px solid rgba(52, 134, 218, 0.6);
  // box-shadow: 0 0 3px 3px rgba(52, 112, 167, 0.9);
  position: relative;
  .top {
    height: 40px;
    width: 97%;
    margin-left: 1.5%;
    border-bottom: 1px solid #2a8cf04a;
    display: flex;
    // padding: 0 15px;
    align-items: center;
    position: relative;
    .borderLeft {
      width: 40px;
      height: 2px;
      background: #4393de;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .borderRight {
      width: 10px;
      height: 2px;
      background: #4393de;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    span {
      font-size: 16px;
      font-family: Adobe Heiti Std, Adobe Heiti Std-R;
      font-weight: R;
      text-align: left;
      // margin-left: 10px;
      color: #ffffff;
    }
  }
  .ech_box {
    width: 100%;
    height: 100%;
  }
  .ech_box_height {
    width: 100%;
    height: calc(100% - 40px);
  }
  .ech_box_center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ech_box_between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .btn {
    width: 34px;
    height: 18px;
    // opacity: 0.9;
    // background: #1cbf24;
    // border: 1px solid rgba(0, 156, 255, 0.52);
    color: #d4f0ff;
    // font-size: 12px;
    border-radius: 14px;
    text-align: center;
    line-height: 21px;
    position: absolute;
    cursor: pointer;
    right: 0px;
    background: url("~@/assets/images/echarts/look2.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 10px;
    }
  }
  .select {
    position: absolute;
    right: 10px;
  }
}
</style>